<template>
  <a-steps :current="current">
    <a-step>
      <template #icon>
        <div class="circle">
          <e-icon type="Basic_Information" font-size="28px" line-height="44px" />
        </div>
      </template>
    </a-step>
    <a-step>
      <template #icon>
        <div class="circle">
          <e-icon type="Customer_Contact" font-size="28px" line-height="44px" />
        </div>
      </template>
    </a-step>
    <a-step>
      <template #icon>
        <div class="circle">
          <e-icon type="mail_record" font-size="28px" line-height="44px" />
        </div>
      </template>
    </a-step>
  </a-steps>
  <div class="titles">
    <div class="title" :class="{ active: current >= 0 }">Basic Information</div>
    <div class="title" :class="{ active: current >= 1 }">Contact Info</div>
    <div class="title" :class="{ active: current >= 2 }">Contact Records</div>
  </div>
</template>

<script setup>
import EIcon from '@/components/EIcon.vue'
defineProps({
  current: Number
})
</script>

<style lang="less" scoped>
.ant-steps {
  display: flex;
  padding: 0 300px;
  .ant-steps-item {
    padding: 0;
    :deep(.ant-steps-item-container) {
      cursor: default;
    }
    &.ant-steps-item-active {
      .circle {
        background-color: @primary-color !important;
        color: @white !important;
        border-color: @primary-color !important;
      }
    }
    &.ant-steps-item-finish {
      .circle {
        background-color: @white !important;
        color: @primary-color !important;
        border-color: @primary-color !important;
      }
    }
    :deep(.ant-steps-item-icon) {
      margin: 0;
      .ant-steps-icon {
        left: 0;
      }
      .circle {
        background-color: @gray;
        width: 46px;
        height: 46px;
        border-radius: 23px;
        color: @text-gray;
        border: 2px solid @gray;
      }
    }
    :deep(.ant-steps-item-title) {
      &:after {
        left: 0;
        top: 21px;
        height: 3px;
      }
    }
  }
}
.titles {
  padding: 6px 265px;
  display: flex;
  justify-content: space-between;
  .title {
    display: inline-block;
    font-weight: 600;
    color: @text-gray;
    &.active {
      color: @black-85p;
    }
  }
}
</style>
